<template>
  <el-container class="main-container">
    <el-aside width="60%" style="background: rebeccapurple">
      <div style="width: 100%; height: 100%;display: flex;align-items: center;justify-content: center;">
        <h1>Wave 接口管理平台</h1>
      </div>
    </el-aside>
    <el-aside width="40%">
      <div style="height: 100%;width: 100%; display: flex; justify-content: center;align-items: center;">
        <avue-login v-model="form"
                    :option="loginFormOption"
                    @refresh="refresh"
                    :codesrc="codeSrc"
                    @submit="handleLogin">
        </avue-login>
      </div>
    </el-aside>
  </el-container>
</template>

<script setup>
import {ref} from 'vue';
import router from "@/router/index.js";
import {authLogin} from "@/views/auth/js/AuthRequest.js";
import {loginFormOption} from "@/views/auth/js/AuthOption.js";
import {useUserStore} from "@/store/index.js";

import {photoCaptcha} from "@/views/auth/js/CommonRequest.js";
import {ElMessage} from "element-plus";

const form = ref({});
const userStore = useUserStore();
const codeSrc = ref('');
const orgCaptcha = ref('')
const handleLogin = (form) => {
  form.orgCaptcha = orgCaptcha.value
  authLogin(form).then(res => {
    if (res.success) {
      userStore.setLoginUserInfo(res.data)
      router.replace("/")
    } else {
      ElMessage.error('账号或密码错误')
      refresh()
    }
  })
};

const refresh = () => {
  photoCaptcha().then(res => {
    if (res.success) {
      codeSrc.value = `data:image/jpeg;base64,${res.data.key}`;
      orgCaptcha.value = res.data.value
    }
  })
}

// 页面加载时自动获取验证码
refresh();
</script>

<style scoped>
.main-container {
  height: 100vh;
}

/* 验证码图片样式 */
.code-image {
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.3s;
}

.code-image:hover {
  opacity: 0.8;
}
</style>